Home:ALL Converter>How to make a full-width tab card in Bootstrap-Vue?

How to make a full-width tab card in Bootstrap-Vue?

Ask Time:2018-11-09T06:22:11         Author:quanpham0805

Json Formatter

I'm having something like this from the Docs in bootstrap-vue:

Card with tabs:

enter image description here

So how do I manage to design the tabs like this:

enter image description here

My current code:

  <b-card no-body>
    <b-tabs card>
      <b-tab title="Tab 1" active>
        Tab Contents 1
      </b-tab>
      <b-tab title="Tab 2">
        Tab Contents 2
      </b-tab>
    </b-tabs>
  </b-card>

Author:quanpham0805,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/53217049/how-to-make-a-full-width-tab-card-in-bootstrap-vue
ittus :

You can use title-item-class=\"w-50\" to make each tap title occupies 50% width\n\n<b-card no-body>\n <b-tabs card>\n <b-tab title=\"Tab 1\" active title-item-class=\"w-50\">\n Tab Contents 1\n </b-tab>\n <b-tab title=\"Tab 2\" title-item-class=\"w-50\">\n Tab Contents 2\n </b-tab>\n </b-tabs>\n</b-card>\n",
2018-11-08T22:38:30
yy